<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教师管理</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <style>
        .layui-footer {
            position: static !important; /* 取消 fixed */
            width: auto; /* 可选：恢复自适应宽度 */
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">教育工程认证系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!--             移动端显示 -->

            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">分支系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">备份系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">追溯系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">日志系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">日志服务1</a></dd>
                    <dd><a href="">日志服务2</a></dd>
                    <dd><a href="">日志服务3</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人信息</a></dd>
                    <dd><a href="">退出登录</a></dd>

                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="side-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">认证</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Main.html">主页</a></dd>
                        <dd><a href="Student.html">学生信息管理</a></dd>
                        <dd><a href="Major.html">专业信息管理</a></dd>
                        <dd class="layui-this"><a href="Teacher.html">教师信息管理</a></dd>
                        <dd><a href="Course.html">学科信息管理</a></dd>
                        <dd><a href="GradeStudentTotal.html">学生成绩管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">漏洞扫描管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="ScanResult.html">扫描结果</a></dd>
                        <dd><a href="javascript:;">风险等级</a></dd>
                        <dd><a href="javascript:;">安全漏洞</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>




    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!-- 内容主体区域_开始-->


            <!--搜索框-->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_teacherName" placeholder="请输入姓名" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">专业</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_teacherId" placeholder="请输入ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>


            <!-- 动态表格-->
            <div style="padding: 15px;">  <table class="layui-hide" id="test" lay-filter="test"></table>

                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
                    </div>
                </script>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="grade_student">学生评分</a>
                    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit_info">个人简介</a>
                </script>



                <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->


            </div>
        </div>
        <!-- 内容主体区域_结束-->






    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    copyright © zero_cavalier 2025
</div>
</div>

<!--引入jquery-->
<script src="js/jquery-3.6.0.js" charset="utf-8"></script>


<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>

<!--新增栏-->
<script type="text/html" id="insert_form">
    <div class="layui-field-box">

        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_teacherName" class="layui-input" placeholder="请输入姓名">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_teacherId" class="layui-input" placeholder="请输入ID">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">所属专业</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_belongsMajor" class="layui-input" placeholder="请输入所属专业">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_position" class="layui-input" placeholder="请输入职位">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_phoneNum" class="layui-input" placeholder="请输入电话号码">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_email" class="layui-input" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">教学课程</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_belongsCourse" class="layui-input" placeholder="请输入教学课程">
            </div>
        </div>
    </div>
</script>
<!--新增栏结束-->

<!--删除栏-->
<script type="text/html" id="delete_form">    <div class="layui-field-box">
    <div style="padding: 20px; text-align: center;">
        <p>确定要删除这条学生记录吗？</p>
        <p style="color: red; margin-top: 10px;">此操作不可恢复！</p>
    </div>
</div>
</script>
<!--删除栏结束-->

<!--编辑栏-->
<script type="text/html" id="edit_form">
    <div class="layui-field-box">

        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_teacherName" class="layui-input" placeholder="请输入姓名">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_teacherId" class="layui-input" placeholder="请输入ID">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">所属专业</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_belongsMajor" class="layui-input" placeholder="请输入所属专业">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_position" class="layui-input" placeholder="请输入职位">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_phoneNum" class="layui-input" placeholder="请输入电话号码">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_email" class="layui-input" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">教学课程</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_belongsCourse" class="layui-input" placeholder="请输入教学课程">
            </div>
        </div>
    </div>
</script>
<!--编辑栏结束-->

<script>
    $("#iReset").click(function () {
        $("#search_teacherName").val("");
        $("#search_teacherId").val("");
        flashTable("", "");
    });

    $("#searchVal").click(function () {
        let search_teacherName = $("#search_teacherName").val();
        let search_teacherId = $("#search_teacherId").val();

        flashTable(search_teacherName, search_teacherId);
    });


    function  flashTable(search_teacherName, search_teacherId){
        let searchJSON = {};
        if (search_teacherName != null && search_teacherName != "") {
            searchJSON.teacherName = search_teacherName;
        }
        if (search_teacherId != null && search_teacherId != "") {
            searchJSON.teacherId = search_teacherId;
        }
        layui.use('table', function() {
            var table = layui.table;
            table.render({
                elem: '#test',
                url: '/teacher/select' /*tpa=/test/table/demo1.json*/,
                where: searchJSON,
                toolbar: '#toolbarDemo',
                title: '专业信息表',
                totalRow: true,
                cols: [
                    [{
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        field: 'teacherId',
                        title: 'ID',
                        width: 80,
                        fixed: 'left',
                        unresize: true,
                        sort: true,
                        totalRowText: '合计'
                    }, {
                        field: 'teacherName',
                        title: '姓名',
                        width: 90,
                        edit: 'text'
                    }, {
                        field: 'belongsMajor',
                        title: '所属专业',
                        width: 120,
                        edit: 'text'
                    }, {
                        field: 'position',
                        title: '职位',
                        width: 80,
                        sort: true,
                        totalRow: true
                    }, {
                        field: 'phoneNum',
                        title: '电话号码',
                        width: 180,
                        edit: 'text',
                        sort: true
                    }, {
                            field: 'email',
                            title: '邮箱',
                            width: 180,
                            edit: 'text',
                            sort: true
                        },
                        {
                            field: 'belongsCourse',
                            title: '教学课程',
                            width: 200,
                            edit: 'text',
                            sort: true
                        },
                        {
                            fixed: 'right',
                            title: '操作',
                            toolbar: '#barDemo',
                            width: 300
                        }]
                ],
                page: true,

            });

            //工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        break;
                    case 'insert':
                        layer.open({              // 弹出框处理  模态框
                            type: 1               // 模态框
                            , title: '新增' //不显示标题栏
                            , closeBtn: false
                            , area: ['500px', '500px']  // 宽和高
                            , shade: 0.5
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['新增', '取消']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: $('#insert_form').html()         // 引入自定义表单
                            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                                // layer.msg("新增按钮执行");
                                let teacherName = $("#insert_teacherName").val();
                                let teacherId = $("#insert_teacherId").val();
                                let belongsMajor = $("#insert_belongsMajor").val();
                                let position = $("#insert_position").val();
                                let phoneNum = $("#insert_phoneNum").val();
                                let email = $("#insert_email").val();
                                let belongsCourse = $("#insert_belongsCourse").val();

                                // 表单验证
                                if (!teacherName || !teacherId || !belongsMajor || !position || !phoneNum || !email || !belongsCourse) {
                                    layer.msg("请填写完整信息!");
                                    return false; // 阻止关闭弹窗
                                }

                                $.ajax({
                                    url: "/teacher/insert",           // 请求路径
                                    type: "post",                  // 请求的方式，不区分大小写
                                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                    contentType: "application/json;charset=utf-8",
                                    data: JSON.stringify({
                                        teacherName: teacherName,
                                        teacherId: teacherId,
                                        belongsMajor: belongsMajor,
                                        position: position,
                                        phoneNum:phoneNum,
                                        email: email,
                                        belongsCourse: belongsCourse
                                    }),
                                    dataType: "json",        // 返回类型，text文本、html页面、json数据
                                    success: function (response) {
                                        console.log("返回: " + response);
                                        if (response.code === 200) {
                                            layer.msg("新增成功!");
                                            layer.close(index);                         // 关闭当前窗口
                                            // 刷新表格数据
                                            table.reload('test');
                                        } else {
                                            layer.msg("新增失败: " + response.msg);
                                        }
                                    },
                                    error: function (response) {
                                        layer.msg(response.msg);
                                        console.log("出错返回: " + response);
                                    }
                                });
                            }
                            , success: function (layero) {

                            }
                        });

                        break;
                }
            });


            //监听行工具事件
            table.on('tool(test)', function (obj) {
                let data = obj.data;
                //console.log(obj)

                //删除逻辑操作
                //删除逻辑操作
                if (obj.event === 'del') {
                    layer.confirm('确定要删除教师 "' + data.teacherName + '" 的记录吗？此操作不可恢复！', {
                        title: '删除确认',
                        icon: 3,
                        btn: ['确认删除', '取消']
                    }, function(index) {
                        // 确认删除后执行删除操作
                        $.ajax({
                            url: "/teacher/delete",
                            type: "post",
                            cache: false,
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify({
                                teacherId: data.teacherId
                            }),
                            dataType: "json",
                            success: function (response) {
                                if (response.code === 200) {
                                    layer.msg("删除成功!", {icon: 1});
                                    obj.del(); // 从表格中删除该行
                                } else {
                                    layer.msg("删除失败: " + response.msg, {icon: 2});
                                }
                            },
                            error: function (response) {
                                layer.msg("删除请求失败!", {icon: 2});
                                console.log("出错返回: " + response);
                            }
                        });
                        layer.close(index);
                    });
                }


                //编辑逻辑操作
                else if (obj.event === 'edit') {
                    layer.open({              // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '编辑' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '500px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['编辑', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#edit_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let teacherName = $("#edit_teacherName").val();
                            let teacherId = $("#edit_teacherId").val();
                            let belongsMajor = $("#edit_belongsMajor").val();
                            let position = $("#edit_position").val();
                            let phoneNum = $("#edit_phoneNum").val();
                            let email = $("#edit_email").val();
                            let belongsCourse = $("#edit_belongsCourse").val();

                            // 表单验证
                            if (!teacherName || !teacherId || !belongsMajor || !position || !phoneNum || !email || !belongsCourse) {
                                layer.msg("请填写完整信息!");
                                return false; // 阻止关闭弹窗
                            }

                            $.ajax({
                                url: "/teacher/update",           // 请求路径
                                type: "post",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    teacherName: teacherName,
                                    teacherId: teacherId,
                                    belongsMajor: belongsMajor,
                                    position: position,
                                    phoneNum:phoneNum,
                                    email: email,
                                    belongsCourse: belongsCourse
                                }),
                                dataType: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 200) {
                                        layer.msg("编辑成功!");
                                        layer.close(index);                         // 关闭当前窗口
                                        // 刷新表格数据
                                        table.reload('test');
                                    } else {
                                        layer.msg("编辑失败: " + response.msg);
                                    }
                                },
                                error: function (response) {
                                    layer.msg("编辑请求失败!");
                                    console.log("出错返回: " + response);
                                }
                            });
                        }
                        , success: function (layero) {
                            $("#edit_teacherName").val(data.teacherName);
                            $("#edit_teacherId").val(data.teacherId);
                            $("#edit_belongsMajor").val(data.belongsMajor);
                            $("#edit_position").val(data.position);
                            $("#edit_phoneNum").val(data.phoneNum);
                            $("#edit_email").val(data.email);
                            $("#edit_belongsCourse").val(data.belongsCourse);

                        }
                    });
                } else if (obj.event === 'grade_student') {
                    // 跳转到学生评分页面

                    var url = 'GradeStudent.html?teacherId=' + data.teacherId;
                        + '&_t=' + Date.now(); // 防缓存

                    var idx = layer.open({
                        type: 2, // iframe
                        title: '老师【' + data.teacherName + '】评分',
                        content: url,
                        area: ['900px', '650px'], // 弹窗大小
                        maxmin: true,
                        shadeClose: true,
                        // 选课完成关闭弹窗后，自动刷新列表
                        end: function () {
                            layui.table.reload('test');
                        }
                    });

                } else if (obj.event === 'edit_info') {
                    // 编辑教师个人信息
                    layer.open({
                        type: 1,
                        title: '编辑 ' + data.teacherName + ' 的个人信息',
                        area: ['500px', '400px'],
                        content: '<div style="padding: 20px;"><textarea id="teacherDescription" placeholder="请输入自我介绍" class="layui-textarea">' + (data.description || '') + '</textarea></div>',
                        btn: ['保存', '取消'],
                        yes: function(index, layero){
                            var description = $('#teacherDescription').val();
                            $.ajax({
                                url: '/teacher/' + data.teacherId + '/description',
                                type: 'PUT',
                                contentType: 'application/json',
                                data: JSON.stringify({ description: description }),
                                success: function() {
                                    layer.msg('保存成功', {icon: 1});
                                    layer.close(index);
                                    table.reload('test'); // 刷新表格
                                },
                                error: function() {
                                    layer.msg('保存失败', {icon: 2});
                                }
                            });
                        }
                    });
                }
            });

        });
    }

    flashTable();

</script>
</body>
</html>